import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/components/base/base_page.dart';
import 'package:cbec_app/components/common/common_style.dart';
import 'package:cbec_app/components/base/base_nav_bar.dart';
import 'package:cbec_app/pages/classify/controller/classify_search_ctr.dart';
import 'package:cbec_app/routes/routes.dart';
import 'package:cbec_app/utils/ThemeConfig.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:cbec_app/utils/logger.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_popup/flutter_popup.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:substring_highlight/substring_highlight.dart';

///分类搜索页
class ClassifySearch extends GetView<ClassifySearchController> {
  const ClassifySearch({super.key});
  @override
  Widget build(BuildContext context) {
    return GetBuilder<ClassifySearchController>(
      builder: (controller) {
        return BasePage(
            bgColor: ThemeConfig.bodyColor,
            iconType: IconType.back,
            isSearch: true,
            isDisable: false,
            searchType: SearchStyleType.photoSearchBtn,
            isShowNavBottomBorder: true,
            onInput: (value) {
              controller.searchSuggest(value);
            },
            onClickSearch: (value) {
              controller.jumpResult();
            },
            textEditingController: controller.textEditingController,
            isAutoFocus: true,
            placeholder: '输入关键字搜索',
            isShowPadding: true,
            children: [
             controller.suggestList.isNotEmpty? suggestBox():emptyWidget(),
             
              _searchHistory(
                  '搜索历史',
                  'gray_delete_icon.png',
                  controller.searchHistory
                      .map((text) => _historyTag(text.toString()))
                      .toList(), () {
                controller.clearHistory();
              }),
              _searchHistory(
                  '搜索热词',
                  'eyes_icon.png',
                  controller.hotList
                      .map((item) => _historyTag(item['name'], url: item['image']))
                      .toList(),
                  () {}),
              // Center(
              //   child: Text('个性推荐'),
              // ),
            ]);
      },
    );
  }

  ///搜索历史
  Widget _searchHistory(
      String title, String iconUrl, List<Widget> list, VoidCallback onClick) {
    return Container(
        margin: EdgeInsets.only(left: 10.w, right: 10.w, top: 16.h),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            Text(
              title,
              style: setTextStyle(14, FontWeight.w500, Color(0xff3d3d3d)),
            ),
            BaseInteractive(
              childWidget: BaseImage(url: iconUrl, width: 14, height: 14),
              onClick: onClick,
            )
          ]),
          SizedBox(
            height: 10.h,
          ),
          Wrap(
            spacing: 8,
            runSpacing: 8,
            children: list,
          )
        ]));
  }

  ///搜索建议
  Widget suggestBox() {
    return Positioned(
        top: 0,
        key: GlobalKey(debugLabel: 'Positioned'),
        child: Container(
          height: 500.h,
          width: 375.w,
          color: Colors.white,
          child: ListView.builder(
            itemCount: controller.suggestList.length,
            itemBuilder:(context, index) {
              return suggestItem(controller.suggestList[index]);
            },)
        ));
  }

  ///创建菜单item
  Widget suggestItem(String text) {
    return BaseInteractive(
      childWidget: Container(
          width: 355.w,
          margin: EdgeInsets.only(left: 10, right: 10),
          padding: EdgeInsets.only(top: 10, bottom: 10),
          child: Row(
            children: [
              const Icon(
                Icons.search,
                size: 20,
              ),
              const SizedBox(
                width: 5,
              ),
              SizedBox(
                width: 315.w,
                child: SubstringHighlight(
                  text: text,
                  terms: controller.highLightWords,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              )
            ],
          )),
      onClick: () {
        controller.selectKeywords(text);
      },
    );
  }

  ///历史记录标签
  Widget _historyTag(String text, {String? url=''}) {
    return BaseInteractive(
        childWidget: Container(
            padding:EdgeInsets.only(left: 10.w, right: 10.w, top: 4.h, bottom: 4.h),
            decoration: BoxDecoration(
                border: Border.all(color: Color(0xffD7D7D7)),
                borderRadius: BorderRadius.all(Radius.circular(25))),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                url != ''
                    ? Container(
                        margin: const EdgeInsets.only(right: 10),
                        child: BaseImage(
                          url: url!,
                          width: 20,
                        ),
                      )
                    : emptyWidget(),
                Text(
                  text.length<10? text:text.substring(0, 10) + '...',//最多只显示10个字，不然就超边界了
                  style: setTextStyle(13, FontWeight.w300, Color(0xff3d3d3d))
                ),
              ],
            )),
        onClick: () {
          controller.selectKeywords(text);
        });
  }
}
